<template>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="ruleFormRef">
        <el-form-item label="商品名称：" prop="name">
            <el-input v-model="formInline.name" placeholder="请输入商品名称" />
        </el-form-item>

        <el-form-item label="商品状态：" prop="status">
            <el-select v-model="formInline.status" placeholder="请选择">
                <el-option label="上架" value="上架" />
                <el-option label="下架" value="下架" />
            </el-select>
        </el-form-item>
        <el-form-item prop="goodstypeId">
            <span>商品类型：</span>
            <el-tree-select v-model="formInline.goodstypeId" :props="defaultProps" node-key="key" :data="state.typeData"
                :render-after-expand="false" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="search()">搜索</el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
    </el-form>
    <div class="botton-group">
        <el-button plain type="primary" @click="addchange()">新增</el-button>
        <el-button plain @click="delect()">删除</el-button>
    </div>
    <el-table ref="multipleTableRef" :data="state.allData" style="width: 100%" height="450"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column property="photo" label="图片">
            <template #default="scope">
                <el-avatar shape="square" :src="scope.row.photo" />
            </template>
        </el-table-column>
        <el-table-column property="name" label="商品名称" show-overflow-tooltip width="300" />
        <el-table-column property="gname" label="商品类型" show-overflow-tooltip />
        <el-table-column property="address" label="服务类型" show-overflow-tooltip />
        <el-table-column property="status" label="状态" show-overflow-tooltip />
        <el-table-column property="price" label="价格" show-overflow-tooltip />
        <el-table-column property="counts" label="数量" show-overflow-tooltip />
        <el-table-column property="likes" label="点赞数" show-overflow-tooltip />
        <el-table-column property="address" label="描述" show-overflow-tooltip />
        <el-table-column label="操作" show-overflow-tooltip>
            <template #default="scope">
                <el-button :icon="Tools" circle @click="handleEdit(scope.$index, scope.row)" />
            </template>
        </el-table-column>
    </el-table>

    <div class="demo-pagination-block">
        <el-pagination v-model:currentPage="state.pageNum" v-model:page-size="state.pageSize"
            :page-sizes="[10, 20, 30, 40]" :small="small" :disabled="disabled" :background="background"
            :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>

    <el-dialog v-model="dialogFormVisible" title="新增商品">
        <el-form :model="form">
            <el-form-item label="商品名称：" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item>
                <span style="margin-left: 60px;">商品类型：</span>
                <el-tree-select v-model="value" :props="defaultProps" node-key="key" :data="state.typeData"
                    :render-after-expand="false" />
            </el-form-item>
            <el-form-item>
                <span style="margin-left: 60px;">服务类型：</span>
                <el-tree-select v-model="value" :props="defaultProps" node-key="key" :data="state.typeData"
                    :render-after-expand="false" />
            </el-form-item>
            <el-form-item label="描述：" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="价格：" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="数量：" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="状态：">
                <el-radio-group v-model="form.resource">
                    <el-radio label="上架" />
                    <el-radio label="下架" />
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">Cancel</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button>
            </span>
        </template>
    </el-dialog>

    <el-dialog v-model="dialogVisible" title="删除确认" width="30%">
        <span>你确定要删除以下商品吗？
            <p style="margin-top: 10px;">{{state.delname.toString()}}</p>
        </span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="realDel()">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import {
    Tools,
} from '@element-plus/icons-vue'
import { onMounted, reactive, ref } from 'vue';
import { FormInstance, ElTable, ElTree, ElMessage } from 'element-plus'
import { getGenTypeApi, getGenApi, delGenApi } from '../../apis/gen'
const ruleFormRef = ref<FormInstance>()
const multipleSelection = ref<User[]>([])
const value = ref()
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const formInline = reactive({
    name: '',
    status: '',
    goodstypeId: '',
})

const dialogFormVisible = ref(false)
const dialogVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})

interface User {
    date: string
    name: string
    address: string
}

function search() {
    const a = `name=${formInline.name}&status=${formInline.status}&goodstypeId=${formInline.goodstypeId}&pageSize=${state.pageSize}&pageNum=${state.pageNum}&`
    getGen(a)
}
const resetForm = (ruleForm: FormInstance | undefined) => {
    if (!ruleForm) return;
    ruleForm.resetFields();
    getGen()
};

const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}

const state = reactive({
    typeData: [] as any,
    allData: [] as any,
    pageSize: 10,
    pageNum: 1,
    total: '',
    delId: '',
    delname: '',
})

const defaultProps = {
    children: state.typeData.children,
    label: "title"
}

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    state.pageSize = val
    console.log(state.pageSize);
    getGen(`pageSize=${val}`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    state.pageNum = val
    getGen(`pageNum=${val}`)
}

function delect() {
    const data = JSON.parse(JSON.stringify(multipleSelection.value));
    console.log(data);
    const a = data.map((item: { name: any }) => {
        return item.name
    })
    state.delId = a
    const b = data.map((item: { id: any }) => {
        return item.id
    })
    state.delname = a
    state.delId = b
    console.log(a);
    console.log(b);
    if (data != "") {
        dialogVisible.value = true
    } else {
        ElMessage.error("没有选中任何内容，无法删除")
    }


}

async function getGenType() {
    const res = await getGenTypeApi()
    console.log(res);
    state.typeData = res.rows.children

}

async function getGen(data?: any) {
    const res = await getGenApi(data)
    console.log(res);
    state.allData = res.rows
    state.total = res.total
}

function addchange() {
    dialogFormVisible.value = true
}

async function delOne() {
    const res = await delGenApi(state.delId)
    console.log(res);
    if (res == "") {
        ElMessage.success("商品删除成功")
        getGen(`pageSize=${state.pageSize}&pageNum=${state.pageNum}`)
    }

}
const handleEdit = (index: number, row: any) => {
    console.log(index, row)
    // if (row.type == 0) {
    //     dialogFormVisible1.value = true
    // }
    // else {
    //     dialogFormVisible2.value = true
    // }
    // form2.menuName = row.title
    // form2.path = row.path
    // form2.component = row.component
    // form2.parentId = row.parentId
    // form2.icon = row.icon
    // form2.perms = row.permission
    // form2.menuId = row.id
    // form2.type = row.type
    // setTimeout(() => {
    //     setCheckedKeys(row.parentId.split())
    // }, 500);
    // console.log(row.parentId.split());

    // form2.orderNum = row.orderNum.push(row.orderNum)
}
function realDel() {
    delOne()
    dialogVisible.value = false
}
onMounted(() => {
    getGenType()
    getGen()
})
</script>

<style scoped>
.botton-group {
    margin-bottom: 10px;
}

.demo-pagination-block {
    margin: 15px 0;
}
</style>